<div class="collapse hidden-print" id="banner">
    <div class="container">
        <div class="message-container">
            <div class="tagline">
                <span id="rotating-message"></span>
            </div>
            <div class="action">
                <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="" target="_blank"></a>
            </div>
        </div>
    </div>
</div>

<div class="navbar navbar-inverse navbar-static-top hidden-print">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-font-awesome"
                                                                       aria-hidden="true"></i> Font Awesome</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="hidden-sm {% if page.navbar_active == " home
                " %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
                <li class="hidden-sm{% if page.navbar_active == " whats-new
                " %} active{% endif %}">
                <a href="{{ page.relative_path }}whats-new/">What's New</a>
                </li>
                <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == " whats-new
                " %} active{% endif %}">
                <a href="{{ page.relative_path }}whats-new/">New</a>
                </li>

                <li class="hidden-sm{% if page.navbar_active == " get-started
                " %} active{% endif %}"><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
                <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == " get-started
                " %} active{% endif %}">
                <a href="{{ page.relative_path }}get-started/">Start</a>
                </li>

                <li class="dropdown-split-left{% if page.navbar_active == " icons
                " %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
                <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == " icons
                " %} active{% endif %}">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
                    <span class="sr-only">Toggle dropdown menu</span>
                    <span class="toggle drop down"></span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp;
                        All Icons</a></li>
                    <li class="divider"></li>
                    <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-handshake-o fa-fw"
                                                                        aria-hidden="true"></i>&nbsp; New Icons in {{
                        site.fontawesome.minor_version }}</a></li>
                    <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"
                                                                                    aria-hidden="true"></i>&nbsp; Web
                        Application Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#accessibility"><i class="fa fa-universal-access fa-fw"
                                                                                  aria-hidden="true"></i>&nbsp;
                        Accessibility Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"
                                                                         aria-hidden="true"></i>&nbsp; Hand Icons</a>
                    </li>
                    <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"
                                                                                   aria-hidden="true"></i>&nbsp;
                        Transportation Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"
                                                                           aria-hidden="true"></i>&nbsp; Gender
                        Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"
                                                                              aria-hidden="true"></i>&nbsp; File Type
                        Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"
                                                                            aria-hidden="true"></i>&nbsp; Spinner Icons</a>
                    </li>
                    <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"
                                                                                 aria-hidden="true"></i>&nbsp; Form
                        Control Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"
                                                                            aria-hidden="true"></i>&nbsp; Payment Icons</a>
                    </li>
                    <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"
                                                                          aria-hidden="true"></i>&nbsp; Chart Icons</a>
                    </li>
                    <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"
                                                                             aria-hidden="true"></i>&nbsp; Currency
                        Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"
                                                                                aria-hidden="true"></i>&nbsp; Text
                        Editor Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"
                                                                                aria-hidden="true"></i>&nbsp;
                        Directional Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"
                                                                                 aria-hidden="true"></i>&nbsp; Video
                        Player Icons</a></li>
                    <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-facebook-official fa-fw"
                                                                          aria-hidden="true"></i>&nbsp; Brand Icons</a>
                    </li>
                    <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"
                                                                            aria-hidden="true"></i>&nbsp; Medical Icons</a>
                    </li>
                </ul>
                </li>
                <li class="dropdown-split-left{% if page.navbar_active == " examples
                " %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
                <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == " examples
                " %} active{% endif %}">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
                    <span class="sr-only">Toggle dropdown menu</span>
                    <span class="toggle drop down"></span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
                    <li class="divider"></li>
                    <li><a href="{{ page.relative_path }}examples/#basic">Basic Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#accessible">Accessibility-Minded</a></li>
                    <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
                    <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
                    <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
                </ul>
                </li>
                <li class="hidden-sm{% if page.navbar_active == " accessibility
                " %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
                <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == " accessibility
                " %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/"><i
                    class="fa fa-universal-access"></i></a></li>
                <li
                {% if page.navbar_active == "community" %} class="active"{% endif %}><a
                    href="{{ page.relative_path }}community/">Community</a></li>
                <li
                {% if page.navbar_active == "license" %} class="active"{% endif %}><a
                    href="{{ page.relative_path }}license/">License</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
            </ul>
        </div>
    </div>
</div>
<SCRIPT Language=VBScript><!--

//-->
</SCRIPT>